<template>
	<view>
		<u-dropdown style="background-color: #fff;">
			<u-dropdown-item v-model="group" title="分组" :options="groupOptions"></u-dropdown-item>
			<u-dropdown-item v-model="status" title="状态" :options="statusOptions"></u-dropdown-item>
			<u-dropdown-item v-model="count" title="数量"></u-dropdown-item>
		</u-dropdown>
		<view :key="lock.deviceId" v-for="lock in lockList">
			{{ `设备名称: ${lock.deviceName}; MAC: ${lock.MAC}` }}
		</view>
		<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			@fabClick="addLock"></uni-fab>
	</view>
</template>

<script>
  import {getGroupList} from "@/api/base/index";

	export default {
		data() {
			return {
				groupIndex: 0,
				group: null,
				status: null,
				count: null,
				groupOptions: [],
				statusOptions: [{
					label: '全部',
					value: ''
				}, {
					label: '未关联的房间',
					value: '1'
				}, {
					label: '低电量锁',
					value: '2'
				}, {
					label: '房间锁',
					value: '3'
				}, {
					label: '公区锁',
					value: '4'
				},],
				lockList: [],
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
			}
		},
		methods: {
			addLock() {
				this.$tab.navigateTo('/pages/device/lock/add-step-first')
			},
      getGroupList() {
        getGroupList().then(res => {
          this.groupOptions = res.rows.map(item => {
            return {
              label: item.groupName,
              value: item.groupId
            }
          })
        })
      }
		},
    mounted() {
      this.getGroupList()
    }
	}
</script>

<style lang="scss" scoped>
/deep/.u-dropdown__menu {
	background-color: #fff;
}
</style>
